<template>
    <div ref="chartDom" style="width: 100%;height: 20px;"></div>
</template> 
  
  <script setup>
  import { watch,ref,onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
  import { debounce } from "@/utils";
  import * as echarts from 'echarts';
  const chartDom = ref();
  
  const props = defineProps({
    percentage: {
      type: Array,
      default: [],
    }
  })
  let myChart = null;
    const Option = computed(() => {
      return {
            grid: {
                top: 0,
                bottom: 0,
                left: '0%',
                right: '0%',
            },
            xAxis: {
                show: false,
                type: 'value',
                boundaryGap: [0, 0],
            },
            yAxis: [
                {
                    type: 'category',
                    data: [''],
                    axisLine: { show: false },
                    axisTick: [
                        {
                            show: false,
                        },
                    ],
                },
            ],
            series: [
                {
                    name: '金额',
                    type: 'bar',
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            color:'#00cdff',
                        },
                    },
                    barWidth: 20,
                    data: [80],
                },
                {
                    name: '背景',
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    data: [10000],
                    itemStyle: {
                        normal: {
                            color: '#006ee9',
                        },
                    },
                },
            ],
        };
    })
    const initChart = () => {
      myChart.setOption(Option.value);
    };
    const resizeChart = () => {
      myChart.resize();
      initChart()
    };
    const resizeHandler = debounce(resizeChart, 100);
    onMounted(() => {
      nextTick(() => {
        myChart = echarts.init(chartDom.value);
        initChart();
      });
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
      myChart.dispose();
    });
  </script>
  